<template>
	<view class="container">
		<view class="search-param">
			<uni-search-bar placeholder="请输入订单号/客户名称" v-model="deliverOrderForm.orderNoOrCustomerName" @confirm="search"
				@cancel="show">
			</uni-search-bar>
		</view>

		<view>
			<uni-row>
				<uni-col :span="5">
					<view class="search-param">
						<uni-data-select v-model="deliverOrderForm.orderStatus" :localdata="statusRange"
							placeholder="状态" @change="search"></uni-data-select>
					</view>
				</uni-col>
				<uni-col :span="7">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="deliverOrderForm.begDa" type="date" placeholder="开始日期"
							:format="'yyyy-MM-dd'" @change="search"></uni-datetime-picker>
					</view>
				</uni-col>
				<uni-col :span="7">
					<view class="datetime-picker-container">
						<uni-datetime-picker v-model="deliverOrderForm.endDa" type="date" placeholder="结束日期"
							:format="'yyyy-MM-dd'" @change="search"></uni-datetime-picker>
					</view>
				</uni-col>
				<uni-col :span="5">
					<view class="search-param">
						<uni-data-select v-model="deliverOrderForm.orderBy" :localdata="orderByRange" placeholder="排序"
							@change="search"></uni-data-select>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view v-for="(deliverOrder, index) in deliverOrderList" :key="index" class="search-results-container">
			<uni-row>
				<uni-col :span="16">
					<div>
						<text>客户：{{ getPartnerName(deliverOrder.partners, 'WE') }}</text>
					</div>
				</uni-col>

				<uni-col :span="8"
					v-if="deliverOrder.orderStatus !== 2 && (!deliverOrder.outboundState || deliverOrder.outboundState === 'A')">
					<div style="text-align: center;">
						<text v-for="status in statusRange" :key="status.value" style="color: rgb(73, 221, 221);">
							<span v-if="status.value === deliverOrder.orderStatus">{{ status.text }}</span>
						</text>
					</div>
				</uni-col>

				<uni-col :span="8" v-if="deliverOrder.outboundState === 'A' && deliverOrder.ticketState === 'C'">
					<div style="text-align: center;">
						<span style="color: rgb(73, 221, 221);">已开票</span>
					</div>
				</uni-col>

				<uni-col :span="8" v-if="deliverOrder.outboundState === 'C'">
					<div style="text-align: center;">
						<span style="color: rgb(73, 221, 221);">已出库</span>
					</div>
				</uni-col>

				<uni-col :span="8" v-if="deliverOrder.orderStatus === 2">
					<view>
						<button class="apply-button" @click="handleDelete(deliverOrder)">撤回</button>
					</view>
				</uni-col>

			</uni-row>

			<uni-row>
				<uni-col :span="11">
					<div>
						<text>发货单号：</text>
					</div>
					<div>
						<text>{{ deliverOrder.deliverNo }}</text>
					</div>
					<div>
						<text>收货人：</text>
					</div>
					<div>
						<text>{{ deliverOrder.custContactsName }}</text>
					</div>
					<div>
						配送方式：<text
							style="color: rgb(250, 167, 0);">{{ deliverOrder.deliveryType === 1 ? '配送' : deliverOrder.deliveryType === 2 ? '自提' : deliverOrder.deliveryType === 3 ? '一次性自提' : '' }}</text>
					</div>
				</uni-col>
				<uni-col :span="13">
					<div>
						<text>订单号：</text>
					</div>
					<div>
						<text>{{ deliverOrder.orderNo }}</text><text
							style="color: red;">{{(deliverOrder.vsnmr === '6' ? '（YT）': deliverOrder.vsnmr === '7' ? '（ZL）' : '')}}</text>
					</div>
					<div>
						<text>收货电话：</text>
					</div>
					<div>
						<text>{{ deliverOrder.custContactsPhone }}</text>
					</div>
					<div v-if="deliverOrder.deliveryType === 1">
						<text style="color: rgb(250, 167, 0);">预估运费：￥{{ deliverOrder.expectedCost }} </text>
					</div>
					<div v-if="deliverOrder.deliveryType !== 1">
						自提管理费：<text
							style="color: rgb(250, 167, 0);">￥{{ deliverOrder.expectedCost ===null ?0: deliverOrder.expectedCost}}</text>
					</div>
				</uni-col>
			</uni-row>
			<div>
				<text style="color: rgb(13, 160, 250);">补贴运价（单位：元/吨）：{{ deliverOrder.rebate }}</text>
			</div>
			<div>
				<text>提货司机：{{ deliverOrder.driverName }}</text>
			</div>
			<uni-row v-if="deliverOrder.deliveryType !== 3">
				<uni-col :span="16">
					<div v-if="deliverOrder.deliveryType !== 3">
						<text>车牌号：{{ deliverOrder.deliverVehicleNo }}</text>
					</div>
				</uni-col>
				<uni-col :span="8" v-if="(deliverOrder.deliverVehicleNo != null &&
				              deliverOrder.deliverVehicleNo !== '' )||
				              (deliverOrder.sapOrderNo != null &&
				              deliverOrder.sapOrderNo !== '' ) &&
				              ![2,3, 6, 7, 16, 20, 17, 18, 19].includes(deliverOrder.orderStatus)">
						<button class="apply-button2"
							@tap="goToVehicleExitQuery(deliverOrder.deliverVehicleNo, deliverOrder.sapOrderNo)">出厂查询</button>
				</uni-col>
			</uni-row>
			<uni-row v-if="deliverOrder.deliveryType === 3">
				<uni-col :span="16">
					<div v-if="deliverOrder.deliveryType === 3">
						<text>车牌号：{{ deliverOrder.oneDeliverVehicleNo  }}</text>
					</div>
				</uni-col>
				<uni-col :span="8" v-if="deliverOrder.oneDeliverVehicleNo != null &&
				              deliverOrder.oneDeliverVehicleNo !== '' &&
				              deliverOrder.sapOrderNo != null &&
				              deliverOrder.sapOrderNo !== '' &&
				              ![2,3, 6, 7, 16, 20, 17, 18, 19].includes(deliverOrder.orderStatus)">
						<button class="apply-button2"
							@tap="goToVehicleExitQuery(deliverOrder.oneDeliverVehicleNo, deliverOrder.sapOrderNo)">出厂查询</button>
				</uni-col>
			</uni-row>
			<div>
				<text>司机电话：{{ deliverOrder.driverPhone }}</text>
			</div>
			<div>
				<text>调拨单号：{{ deliverOrder.sapOrderNo }}</text>
			</div>
			<div>
				<text>是否使用塑托：{{ deliverOrder.deliverIsTray ? '是' : '否' }}</text>
			</div>
			<div>
				<text>客户地址：{{ deliverOrder.custAdress }}</text>
			</div>
			<div>
				<text>接收方名称：{{ deliverOrder.receiveName }}</text>
			</div>
			<div style="margin-bottom: 5px;">
				<text>物流备注：{{ deliverOrder.produceRemrk }}</text>
			</div>

			<div class="align-left-right" style="margin-bottom: 5px;"
				v-if="deliverOrder.deliDeliverOrderDetailList != null">
				<text style="font-size: 18px; font-weight: bold;">物料明细</text>
				<text
					style="font-size: 18px; font-weight: bold;">共{{deliverOrder.deliDeliverOrderDetailList.length}}条明细</text>
			</div>

			<view v-for="(deliSaleOrderDetail, index) in deliverOrder.deliDeliverOrderDetailList" :key="index">
				<view class="search-resultDetails-container">
					<div>
						<text>物料描述：{{ deliSaleOrderDetail.arktx }}</text>
					</div>
					<uni-row>
						<uni-col :span="12">
							<div>
								<text>重量：{{ deliSaleOrderDetail.canweight }} kg</text>
							</div>
							<div>
								物料单价：<text
									style="color: rgb(250, 167, 0);">￥{{ deliSaleOrderDetail.discountPrice ? deliSaleOrderDetail.discountPrice : deliSaleOrderDetail.price }}</text>
							</div>
						</uni-col>
						<uni-col :span="12">
							<div>
								<text>包数：{{ deliSaleOrderDetail.canvolum }}</text>
							</div>
							<div>
								<text>仓库备注：{{ deliSaleOrderDetail.whremark }}</text>
							</div>
						</uni-col>
					</uni-row>
				</view>
			</view>

			<div>
				<text>申请时间：{{ deliverOrder.createTime }}</text>
			</div>
			<div>
				<text>下单时间：{{ deliverOrder.orderTime }}</text>
			</div>
			<div style="border-bottom: 2px solid #f5f5f5;">
				<text>审批时间：{{ deliverOrder.auditTime }}</text>
			</div>

		</view>
	</view>
</template>

<script>
	import {
		listDeliverOrderPage,
		listDeliverOrderUniPage,
		listDeliverOrderdDetailPage,
		delDeliverOrderByNo,
		statusSyncByOptName,
		withDrawDeliverOrder,
	} from '@/api/tms/deliverOrder'

	export default {

		created() {
			this.statusSync();
		},
		data() {
			return {
				deliverOrderList: [],
				deliverOrderDetailList: [],
				deliDeliverOrder: {
					name1: "",
					deliverNo: "",
					orderNo: "",
					custContactsName: "",
					custContactsPhone: "",
					driverName: "",
					driverPhone: "",
					deliverVehicleNo: "",
					sapOrderNo: "",
					deliveryType: "",
					deliverIsTray: "",
					custAdress: "",
					delivermark: "",
					produceRemrk: "",
					createTime: "",
					orderTime: "",
					auditTime: "",
					partners: "",
					vsnmr: "",
				},
				deliDeliverOrderDetail: {
					arktx: "",
					applyWeight: "",
					canweight: "",
					applyVolum: "",
					canvolum: "",
					price: "",
					whremark: "",
					createTime: "",
					orderTime: "",
					auditTime: "",
				},
				deliverOrderForm: {
					orderStatus: "",
					orderNoOrCustomerName: "",
					auditState: "",
					begDa: "",
					endDa: "",
					orderBy: 1,
					beg: "",
					end: "",
				},
				orderByRange: [{
						value: 1,
						text: "默认"
					},
					{
						value: 2,
						text: "按时间升序"
					},
					{
						value: 3,
						text: "按时间降序"
					},
				],
				statusRange: [{
						value: 2,
						text: "待审批"
					},
					{
						value: 3,
						text: "已删除"
					},
					{
						value: 4,
						text: "待物流分配"
					},
					{
						value: 5,
						text: "调拨单成功"
					},
					{
						value: 6,
						text: "审批驳回"
					},
					{
						value: 7,
						text: "已撤销"
					},
					{
						value: 8,
						text: "物流已分配"
					},
					{
						value: 9,
						text: "物流已排车"
					},
					{
						value: 10,
						text: "物流已接单"
					},
					{
						value: 11,
						text: "物流已签收"
					},
					{
						value: 12,
						text: "物流已回单"
					},
					{
						value: 13,
						text: "物流待审批"
					},
					{
						value: 14,
						text: "物流已审批"
					},
					{
						value: 15,
						text: "物流已拆单"
					},
					{
						value: 16,
						text: "物流已拒绝"
					},
					{
						value: 20,
						text: "物流未通过"
					},
					{
						value: 17,
						text: "物流已删除"
					},
					{
						value: 18,
						text: "订单撤销异常"
					},
					{
						value: 19,
						text: "SAP已删除"
					},

				],
			};
		},
		methods: {
			goToVehicleExitQuery(deliverVehicleNo, sapOrderNo) {
				if ((deliverVehicleNo != null && deliverVehicleNo !== "") || ( sapOrderNo != null && sapOrderNo !== "")) {
					uni.navigateTo({
						url: '/pages/ec/vehicleExitQuery/index?deliverVehicleNo=' + deliverVehicleNo +
							'&sapOrderNo=' + sapOrderNo,
					});
				}
			},
			getPartnerName(partnersJson, targetParvw) {
				try {
					const partnersArray = JSON.parse(partnersJson);
					const targetPartner = partnersArray.find(partner => partner.parvw === targetParvw);
					return targetPartner ? targetPartner.name1 : '';
				} catch (error) {
					console.error('Error parsing partners JSON:', error);
					return '';
				}
			},
			handleDelete(deliverOrder) {
				const vm = this;
				const deliverNos = deliverOrder.deliverNo;
				uni.showModal({
					title: '提示',
					content: '是否确认撤回发货申请表编号为"' + deliverNos + '"的数据项？',
					success: function(res) {
						if (res.confirm) {
							withDrawDeliverOrder(deliverNos).then(() => {
								uni.showToast({
									title: '撤回成功',
									icon: 'success',
									duration: 2000
								});
								vm.search();
							});
						}
					}
				});
			},
			search() {
				if (!this.deliverOrderForm.begDa) {
					const newDate = new Date();
					newDate.setDate(newDate.getDate() - 15);
					this.begin = newDate.toISOString().split('T')[0] + " 00:00:00";
					this.deliverOrderForm.begDa = newDate.toISOString().split('T')[0];
				} else {
					this.begin = this.deliverOrderForm.begDa + " 00:00:00"
				}
				if (!this.deliverOrderForm.endDa) {
					const now = new Date();
					this.end = now.toISOString().split('T')[0] + " 23:59:59";
					this.deliverOrderForm.endDa = now.toISOString().split('T')[0];
				} else {
					this.end = this.deliverOrderForm.endDa + " 23:59:59";
				}
				console.log({
					"params": {
						"beginDeliverTime": this.begin,
						"endDeliverTime": this.end,
					},
					"orderStatus": this.deliverOrderForm.orderStatus,
					"orderNoOrCustomerName": this.deliverOrderForm.orderNoOrCustomerName,
					"orderBy": this.deliverOrderForm.orderBy,
					"pageNum": 1,
					"pageSize": 50
				});
				listDeliverOrderUniPage({
					"params": {
						"beginDeliverTime": this.begin,
						"endDeliverTime": this.end,
					},
					"orderStatus": this.deliverOrderForm.orderStatus,
					"orderNoOrCustomerName": this.deliverOrderForm.orderNoOrCustomerName,
					"orderBy": this.deliverOrderForm.orderBy,
					"pageNum": 1,
					"pageSize": 50
				}).then(response => {
					var deliverOrderList = response.rows;
					this.deliverOrderList = deliverOrderList;
				});
			},
			show() {
				if (!this.deliverOrderForm.begDa) {
					const newDate = new Date();
					newDate.setDate(newDate.getDate() - 15);
					this.begin = newDate.toISOString().split('T')[0] + " 00:00:00";
					this.deliverOrderForm.begDa = newDate.toISOString().split('T')[0];
				} else {
					this.begin = this.deliverOrderForm.begDa + " 00:00:00"
				}
				if (!this.deliverOrderForm.endDa) {
					const now = new Date();
					this.end = now.toISOString().split('T')[0] + " 23:59:59";
					this.deliverOrderForm.endDa = now.toISOString().split('T')[0];
				} else {
					this.end = this.deliverOrderForm.endDa + " 23:59:59";
				}
				console.log({
					"params": {
						"beginDeliverTime": this.begin,
						"endDeliverTime": this.end,
					},
					"orderStatus": this.deliverOrderForm.orderStatus,
					"orderNoOrCustomerName": this.deliverOrderForm.orderNoOrCustomerName,
					"orderBy": this.deliverOrderForm.orderBy,
					"pageNum": 1,
					"pageSize": 50
				});
				listDeliverOrderUniPage({
					"params": {
						"beginDeliverTime": this.begin,
						"endDeliverTime": this.end,
					},
					"orderStatus": this.deliverOrderForm.orderStatus,
					"orderBy": this.deliverOrderForm.orderBy,
					"pageNum": 1,
					"pageSize": 50,
					"orderNoOrCustomerName": this.deliverOrderForm.orderNoOrCustomerName,
				}).then(response => {
					var deliverOrderList = response.rows;
					this.deliverOrderList = deliverOrderList;
				});
				this.statusSync();
			},
			onLoad() {
				this.search();
			},
			async statusSync() {
				// console.log("同步");
				// try {
				// 	statusSyncByOptName().then(response => {
				// 		this.$modal.msgSuccess("状态同步成功");
				// 		this.openSynch = false;
				// 		this.search();
				// 	});
				// } catch (error) {
				// 	console.error("状态同步失败:", error);
				// }
			},
		},
	};
</script>

<style>
	.container {
		flex-direction: row;
		flex: auto;
		background-color: #fff;
		font-size: 16px;
	}

	.search-param {
		background-color: #fff;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.datetime-picker-container {
		flex: 1;
		text-align: center;
		/* 将内容设置为居中 */
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		height: 200%;
		padding: 3px;
		background-color: #fff;
		border-top: 10px solid #f5f5f5;
	}

	.search-resultDetails-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		padding: 3px;
		background-color: #f5f5f5;
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		border-top: 4px solid #f5f5f5;
		/* 设置底部边框颜色 */
		padding: 4px;
		/* 设置内边距 */
	}

	.spacing {
		margin-right: 100px;
	}

	.right-align-1 {
		text-align: right;
	}

	.right-align-2 {
		text-align: right;
	}

	.align-left-right {
		display: flex;
		justify-content: space-between;
		margin-right: 20px;
	}

	.search-results-container div {
		padding: 3px;
	}

	.apply-button {
		font-size: 15px;
		border: 1px solid orange;
		border-radius: 4px;
		color: orange;
		margin-right: 10px;
		width: 80px;
		height: 26px;
		margin-top: 4px;
		margin-bottom: 4px;
		line-height: 26px;
		text-align: center;
	}

	.apply-button2 {
		font-size: 15px;
		border: 1px solid #00c851;
		border-radius: 4px;
		color: #00c851;
		margin-right: 10px;
		width: 100px;
		height: 23px;
		line-height: 23px;
		text-align: center;
	}

	.vehicle-exit-query-button {
		text-decoration: underline;
		cursor: pointer;
		color: #00c851;
		text-decoration-color: #00c851;
		margin-right: 5px;
		text-align: center;
	}
</style>